import React from 'react';
import {
	StyleSheet,
	Text,
	View,
	SafeAreaView,
	SectionList
} from 'react-native';
const styles = StyleSheet.create({
	container: {
		flex: 1,
		marginHorizontal: 16
	},
	item: {
		backgroundColor: '#f9c2ff',
		padding: 20,
		marginVertical: 8
	},
	header: {
		fontSize: 32,
		backgroundColor: '#fff'
	},
	title: {
		fontSize: 24
	}
});
const DATA = [
	{
		title: 'Main dishes',
		data: ['Pizza', 'Burger', 'Risotto']
	},
	{
		title: 'Sides',
		data: ['French Fries', 'Onion Rings', 'Fried Shrimps']
	},
	{
		title: 'Drinks',
		data: ['Water', 'Coke', 'Beer']
	},
	{
		title: 'Desserts',
		data: ['Cheese Cake', 'Ice Cream']
	}
];

const Item = ({ title }) => (
	<View style={styles.item}>
		<Text style={styles.title}>{title}</Text>
	</View>
);

const SectionListPage = () => (
	<SafeAreaView style={styles.container}>
		<SectionList
    keyExtractor={(item, index) => item + index}
    renderItem={({ item }) => <Item title={item} />}
    renderSectionHeader={({ section: { title } }) => (
				<Text style={styles.header}>{title}</Text>
			)}
    sections={DATA}
		/>
	</SafeAreaView>
);


export default SectionListPage;
